<template>
  <wd-popup v-model="visible" position="bottom" :style="{ height: '70%' }">
    <view class="account-detail" v-if="account">
      <view class="detail-header">
        <text class="detail-title">账号详情</text>
        <wd-icon name="close" size="20px" @click="close"></wd-icon>
      </view>
      
      <view class="detail-content">
        <view class="detail-category">
          <category-icon :icon-name="account.category" class="category-icon"></category-icon>
          <text class="category-name">{{ getCategoryName(account.category) }}</text>
        </view>
        
        <view class="detail-item">
          <text class="detail-label">名称</text>
          <view class="detail-value">
            <text>{{ account.name }}</text>
          </view>
        </view>
        
        <view class="detail-item">
          <text class="detail-label">账号</text>
          <view class="detail-value">
            <text>{{ account.username }}</text>
            <wd-icon name="copy" size="18px" color="#999" @click="copyText(account.username, '账号已复制')"></wd-icon>
          </view>
        </view>
        
        <view class="detail-item">
          <text class="detail-label">密码</text>
          <view class="detail-value">
            <text>{{ account.password }}</text>
            <wd-icon name="copy" size="18px" color="#999" @click="copyText(account.password, '密码已复制')"></wd-icon>
          </view>
        </view>
        
        <view class="detail-item" v-if="account.website">
          <text class="detail-label">网站</text>
          <view class="detail-value">
            <text>{{ account.website }}</text>
            <wd-icon name="copy" size="18px" color="#999" @click="copyText(account.website, '网址已复制')"></wd-icon>
          </view>
        </view>
        
        <view class="detail-item" v-if="account.description">
          <text class="detail-label">备注</text>
          <view class="detail-value description">
            <text>{{ account.description }}</text>
          </view>
        </view>
        
        <!-- 移除时间记录 -->
      </view>
      
      <view class="detail-footer">
        <wd-button type="primary" @click="editAccount">编辑</wd-button>
        <wd-button type="danger" @click="deleteAccount">删除</wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<script>
import { ACCOUNT_CATEGORIES } from '../stores/account.js'
import CategoryIcon from './CategoryIcon.vue'

export default {
  name: 'AccountDetail',
  components: {
    CategoryIcon
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    account: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      categories: ACCOUNT_CATEGORIES
    }
  },
  watch: {
    show(val) {
      this.visible = val
    },
    visible(val) {
      if (!val) {
        this.$emit('update:show', false)
      }
    }
  },
  methods: {
    close() {
      this.visible = false
    },
    editAccount() {
      this.$emit('edit', this.account)
      this.visible = false
    },
    deleteAccount() {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除「${this.account.name}」账号吗？`,
        success: (res) => {
          if (res.confirm) {
            this.$emit('delete', this.account)
            this.visible = false
          }
        }
      })
    },
    copyText(text, message) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: message,
            icon: 'success'
          })
        }
      })
    },
    getCategoryName(categoryId) {
      const category = this.categories.find(c => c.id === categoryId)
      return category ? category.name : '未分类'
    },
    // 移除formatDate方法
  }
}
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.account-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  
  .detail-title {
    font-size: 18px;
    font-weight: 500;
  }
}

.detail-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.detail-category {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  
  .category-icon {
    margin-right: 10px;
    width: 32px;
    height: 32px;
    
    :deep(svg) {
      width: 20px;
      height: 20px;
    }
  }
  
  .category-name {
    font-size: 16px;
    font-weight: 500;
  }
}

.detail-item {
  margin-bottom: 15px;
  
  .detail-label {
    display: block;
    font-size: 14px;
    color: #999;
    margin-bottom: 5px;
  }
  
  .detail-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #333;
    word-break: break-all;
    
    &.description {
      white-space: pre-wrap;
    }
  }
}

.detail-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-top: 1px solid #eee;
  
  .wd-button {
    width: 48%;
  }
}
</style>